import React, { Component } from 'react'
import { Switch, Redirect } from 'react-router'
import { PrivateRoute } from 'components/route'
import Styled from 'styled-components'
import List from './orgList'
import Invite from './invite'
import NewTeam from './newTeam'
import EditUser from './editMember'

const StyledContainer = Styled.div`
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 30px;
  overflow-y: scroll;
`
export default class Members extends Component {
  componentDidMount() {
    const { setParentActiveItem } = this.props
    setParentActiveItem('members')
  }

  render() {
    const { location, match, org } = this.props
    return (
      <StyledContainer>
        <Switch location={location}>
          <PrivateRoute
            path={`${match.url}/list`}
            render={props => <List {...props} org={org} />}
            exact
          />
          <PrivateRoute
            path={`${match.url}/invite`}
            render={props => <Invite {...props} org={org} />}
            exact={false}
          />
          <PrivateRoute
            path={`${match.url}/newTeam/:path*`}
            render={props => <NewTeam {...props} org={org} />}
            exact={false}
          />
          <PrivateRoute
            path={`${match.url}/edit/:name`}
            render={props => <EditUser {...props} org={org} />}
            exact
          />
          <Redirect from={`${match.url}`} to={`${match.url}/list`} />
        </Switch>
      </StyledContainer>
    )
  }
}
